<template>
  <div class="content">
    <div id="myChart"></div>
    <div id="main" ref="chart"></div>
  </div>
</template>

<script>
import axios from "axios";
import { findallshoper } from "@/api/user.js";
var echarts = require("echarts");
export default {
  data() {
    return {
      num: 0,
      len: 0
    };
  },

  mounted() {
    this.$store.dispatch("user/findallshoper");
    let arr = this.$store.getters.allshoper;
    let lens = arr.filter(
      item => item.status == 2 && item.position == 2 && !item.isBan
    ).length;
    this.len = lens;
    this.$store.dispatch("shops/get", { id: "", size: "", current: "" });
    let nums = this.$store.getters.shopsStu.total;
    this.num = nums;
    this.drawLine();
    let mychart = echarts.init(this.$refs.chart);
    mychart.showLoading();
    setTimeout(function() {
      let self = this;
      self.data = {
        series: [
          {
            type: "pie",
            radius: "55%",
            roseType: "angle",
            backgroundColor: "#2c343c",
            itemStyle: {
              // 阴影的大小
              shadowBlur: 200,
              // 阴影水平方向上的偏移
              shadowOffsetX: 30,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 40,
              emphasis: { shadowBlur: 800 },
              // 阴影颜色
              shadowColor: "rgba(0, 0, 0, 0)"
            },
            textStyle: {
              color: "rgba(255, 255, 255,)"
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255,)"
              }
            },
            // 高亮样式。
            emphasis: {
              itemStyle: {
                // 高亮时点的颜色。
                color: "blue"
              },
              label: {
                show: true,
                // 高亮时标签的文字。
                color: "black"
              }
            },
            data: [
              { value: lens, name: "商家" },
              { value: nums, name: "商家店铺" }
            ]
          }
        ]
      };
      mychart.hideLoading();
      mychart.setOption(this.data);
    }, 1000);
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "商家和商家店铺" },
        tooltip: {},
        xAxis: {
          data: ["商家", "商家店铺"]
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: [this.len, this.num]
          }
        ]
      });
    }
  }
};
</script>

<style>
.content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
#myChart {
  width: 500px;
  height: 400px;
}
#main {
  width: 400px;
  height: 400px;
  margin-right: 50px;
}
</style>